<template>
	<view class="doctor-detail">
		<!-- 医生信息 -->
		<view class="doctor-info">
			<view class="doctor-info-left">
				<view class="doctor-info-left-name">
					<text class="info-name">曹雨声</text>
					<text class="info-post">动物医院院长</text>
				</view>
				<view class="doctor-info-left-number">执业编号：A012938790087</view>
				<view class="doctor-info-left-list">
					<view class="doctor-info-left-item">技术院长</view>
					<view class="doctor-info-left-item">海外留学</view>
					<view class="doctor-info-left-item">从业8年以上</view>
				</view>
			</view>
			<image class="doctor-info-right" src="https://nabercat.oss-cn-hangzhou.aliyuncs.com/15456303108155.jpeg" mode="aspectFill"></image>
		</view>
		<!-- 专业介绍 -->
		<view class="doctor-professional">
			<text>
				擅长：【专家医生】犬猫呕吐拉稀等症状，传染性疾病，寄生虫疾病，消化系统，呼吸系统，泌尿疾病消化系统，呼吸系犬猫呕吐拉稀等症状，传染性疾病，寄生虫疾病，消化系统，呼吸系统，泌尿疾病消化系统，呼吸系犬猫呕吐拉稀等症状，传染性疾病，寄生虫疾病，消化系统，呼吸系统，泌尿疾病消化系统，呼吸系
			</text>
			<text class="zoom-btn">收起</text>
		</view>
		<!-- 个人简介 -->
		<view class="doctor-title">个人简介</view>
		<view class="doctor-profile">
			2013年2月--获得中国农业部颁发的全国执业兽医师资格证书。擅长小动物临床外科软组织手术操作和内科常见疾病诊治，其中在母犬猫微创绝育术中较为突出，现阶段研究方向以小动物外固定支架和皮肤外科矫形术为主。对于小动物临床常见的手术，如胃肠手术、泌尿系统手术、生殖系统手术、皮肤外伤矫形手术有着丰富的临床经验。对小动物传染病，犬瘟热，细小病毒，冠状病毒，狗窝咳，猫瘟热，猫鼻支等烈性传染病有丰富的治疗经验，治愈率高。对小动物皮肤病的治疗效果突出，有自己独到的见解和看法。对犬猫胰腺炎等疾病有着非常高的治愈率。
		</view>
		<!-- 用户提问 -->
		<view class="doctor-title">用户提问</view>
		<view class="user-quiz-list">
			<view class="user-quiz-item">
				<view class="user-quiz-item-top">
					<image class="user-head-img" src="https://nabercat.oss-cn-hangzhou.aliyuncs.com/15456303108155.jpeg" mode="aspectFill"></image>
					<text class="user-nickname">188****8226</text>
					<text class="user-tiem">07月21日 00:15</text>
				</view>
				<view class="user-quiz-item-content">
					症状描述：猫咪5个月大，晚上睡觉时躺着闭嘴，呼吸急促，鼻子干。当天晚上喝水较多，晚餐冻干鸡肉搭配羊奶晚餐冻干数据库的返回给
				</view>
			</view>
			<view class="user-quiz-item">
				<view class="user-quiz-item-top">
					<image class="user-head-img" src="https://nabercat.oss-cn-hangzhou.aliyuncs.com/15456303108155.jpeg" mode="aspectFill"></image>
					<text class="user-nickname">188****8226</text>
					<text class="user-tiem">07月21日 00:15</text>
				</view>
				<view class="user-quiz-item-content">
					症状描述：猫咪5个月大，晚上睡觉时躺着闭嘴，呼吸急促，鼻子干。当天晚上喝水较多，晚餐冻干鸡肉搭配羊奶晚餐冻干数据库的返回给
				</view>
			</view>
		</view>
		<!-- 底部 -->
		<view class="doctor-detail-bottom">
			<button class="doctor-detail-share" open-type="share">
				<icon class="icon-FENGXIANG"></icon>
				<text>分享</text>
			</button>
			<button class="doctor-detail-btn" @click="seleteType">免费提问</button>
		</view>
		<!-- 结束图片 -->
		<end-img />
		<!-- 弹出框 -->
		<uni-popup ref="popup" type="bottom">
			<view class="popup-list">
				<button class="popup-item" open-type="contact">在线问诊</button>
				<view class="popup-item" @click="toGraphic">图文问诊</view>
				<view class="popup-cancel" @click="cancelType">取消</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import EndImg from '@/components/endImg/endImg.vue';
export default {
	components: {
		EndImg
	},
	data() {
		return {};
	},
	mounted() {},
	methods: {
		// 免费提问
		seleteType() {
			this.$refs.popup.open();
		},
		// 取消
		cancelType() {
			this.$refs.popup.close();
		},
		// 跳转图文问诊
		toGraphic() {
			this.cancelType();
			uni.navigateTo({
				url: `/pagesHome/graphicInquiry/graphicInquiry`
			});
		}
	},
	onLoad(options) {}
};
</script>

<style scoped lang="scss">
@import '@/static/css/public.scss';
.doctor-detail {
	padding: 32rpx 32rpx 180rpx 32rpx;
	.doctor-info {
		display: flex;
		margin-bottom: 24rpx;
		.doctor-info-left {
			flex: 1;
			margin-right: 20rpx;
			.doctor-info-left-name {
				display: flex;
				align-items: center;
				margin-bottom: 8rpx;
				.info-name {
					font-size: 36rpx;
					font-weight: 500;
					color: #333333;
					margin-right: 20rpx;
				}
				.info-post {
					font-size: 28rpx;
					color: #666666;
				}
			}
			.doctor-info-left-number {
				font-size: 28rpx;
				color: #666666;
				line-height: 40rpx;
				margin-bottom: 12rpx;
			}
			.doctor-info-left-list {
				display: flex;
				font-size: 24rpx;
				color: #fdaf4d;
				.doctor-info-left-item {
					height: 38rpx;
					line-height: 38rpx;
					padding: 0 8rpx;
					background: rgba(255, 247, 221, 0.6);
					border-radius: 4rpx;
					margin-right: 16rpx;
				}
			}
		}
		.doctor-info-right {
			width: 116rpx;
			height: 116rpx;
			background: #dcdddd;
			border-radius: 16rpx;
		}
	}
	.doctor-professional {
		font-size: 24rpx;
		color: #666666;
		line-height: 44rpx;
		.zoom-btn {
			font-size: 28rpx;
			font-weight: 600;
			color: #34d1a9;
			line-height: 36rpx;
			display: inline-block;
			margin-left: 16rpx;
		}
	}
	.doctor-title {
		font-size: 36rpx;
		font-weight: 600;
		color: #333333;
		line-height: 50rpx;
		margin: 32rpx 0 24rpx 0;
	}
	.doctor-profile {
		font-size: 24rpx;
		color: #666666;
		line-height: 44rpx;
	}
	.user-quiz-list {
		.user-quiz-item {
			margin-bottom: 24rpx;
			padding-bottom: 12rpx;
			position: relative;
			&:nth-last-of-type(1) {
				margin-bottom: 0;
			}
			&::before {
				content: '';
				width: 98%;
				height: 2rpx;
				background: #f1f1f1;
				position: absolute;
				bottom: 0;
				left: 50%;
				transform: translateX(-50%);
			}
			&:nth-last-of-type(1)::before {
				content: '';
				width: 98%;
				height: 2rpx;
				background: #ffffff;
				position: absolute;
				bottom: 0;
				left: 50%;
				transform: translateX(-50%);
			}
			.user-quiz-item-top {
				display: flex;
				align-items: center;
				margin-bottom: 12rpx;
				.user-head-img {
					height: 60rpx;
					width: 60rpx;
					border-radius: 50%;
					margin-right: 12rpx;
				}
				.user-nickname {
					font-size: 28rpx;
					color: #333333;
					margin-right: auto;
				}
				.user-tiem {
					font-size: 24rpx;
					color: #999999;
				}
			}
			.user-quiz-item-content {
				font-size: 24rpx;
				color: #666666;
				line-height: 44rpx;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
			}
		}
	}
}
</style>
